<template>
    <div style="display:flex;width:100%" class="nodes">
        <div v-for="(item, i) in data" :key="i + getRandNum(5)" :class="'node '+(line ? data.length === 1 ? '':
        (i === 0 ? 'left' : (i === data.length - 1 ? 'right' : 'topLine'))  : '')">
            <div style="width:fit-content">
                <div v-if="line" style="margin:auto;width:1px;height:30px;background:black"></div>
                <div v-if="item.list">
                  <div class="nodeContent" :id="itemTagId(item)" @contextmenu.prevent="openMenu($event, item)">
                    <strc :data="item"/>
                    <div class="nodeRightMenu" v-if="isMenu">
                      <div v-if="cutMenu">
                        <button class="menu" v-for="(menu, ix) in cutMenu" :key="ix"
                         @click="doFun(menu.fun, menu.args === '$item' ? item :
                         menu.args === '$ip' ? {
                           i: item,
                           p: parent
                         } :
                         menu.args, menu.useThat || false)">{{menu.name}}</button>
                      </div>
                      <div v-else>
                        <button class="menu" @click="edit(item)">编辑名称</button>
                        <button class="menu" @click="del(item)">删除节点</button>
                        <button class="menu" @click="addNode(item)">新增子节点</button>
                      </div>
                    </div>
                  </div>
                  <div style="margin:auto;width:1px;min-height:30px;background:black"></div>
                  <str :data="item.list" :cutMenu="cutMenu" :parent="item" :line="true" :isMenu="isMenu" @update="update"/>
                </div>
                <div v-else>
                  <div class="nodeContent" :id="itemTagId(item)" @contextmenu.prevent="openMenu($event, item)">
                    <strc :data="item" />
                    <div class="nodeRightMenu" v-if="isMenu">
                      <div v-if="cutMenu">
                        <button class="menu" v-for="(menu, ix) in cutMenu" :key="ix"
                         @click="doFun(menu.fun, menu.args === '$item' ? item :
                         menu.args === '$ip' ? {
                           i: item,
                           p: parent
                         } :
                         menu.args, menu.useThat || false)">{{menu.name}}</button>
                      </div>
                      <div v-else>
                        <button class="menu" @click="edit(item)">编辑名称</button>
                        <button class="menu" @click="del(item)">删除节点</button>
                        <button class="menu" @click="addNode(item)">新增子节点</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CONTENT from './StrContent.vue'
export default {
  name: 'Str',
  data () {
    return {
      datax: this.data
    }
  },
  // watch: {
  //   'data': {
  //     handler: function (e, old) {
  //       this.datax = e
  //     }
  //   }
  // },
  components: {
    strc: CONTENT
  },
  props: {
    // 传入数据
    data: {
      type: [Array]
    },
    // 上级节点
    parent: {
      type: [String, Number, Object],
      default: ''
    },
    // 开启划线
    line: {
      type: Boolean,
      default: false
    },
    // 是否开启菜单
    isMenu: {
      type: Boolean,
      default: true
    },
    // 自定义菜单 - 开启菜单后才能使用
    cutMenu: {
      type: Array
    }
  },
  methods: {
    getRandNum (n) {
      let str = ''
      for (let i = 0; i < n; i++) {
        str += Math.floor(Math.random() * 10)
      }
      return str
    },
    itemTagId (item) {
      item.tagId = this.getRandNum(10)
      return item.tagId
    },
    // 打开菜单
    openMenu (e, data) {
      if (!this.isMenu) {
        this.lseutil.msg({
          msg: '当前关闭了菜单操作',
          type: 2
        })
        return
      }
      e.preventDefault()
      // 关闭其他菜单
      let dom = document.getElementById(data.tagId)
      // 显示dom下 nodeRightMenu菜单
      let menuDom = dom.getElementsByClassName('nodeRightMenu')[0]
      if (menuDom.style.height === '0px' || !menuDom.style.height || menuDom.style.height === 0) {
        let menus = document.getElementsByClassName('nodeRightMenu')
        for (let i = 0; i < menus.length; i++) {
          let item = menus[i]
          item.style.height = '0px'
          item.style.padding = '0 0'
        }
        menuDom.style.height = this.cutMenu && this.cutMenu.length > 0 ? (this.cutMenu.length * 50.8) + 20 + 'px' : (3 * 50.8 + 20) + 'px'
        menuDom.style.padding = '10px 0'
      } else {
        menuDom.style.height = '0px'
        menuDom.style.padding = '0 0'
      }
    },
    update () {
      this.updateData()
      this.$forceUpdate()
    },
    updateData () {
      this.$emit('update')
    },
    // 新增节点
    addNode (item) {
      if (!item.list) {
        item.list = []
      }
      item.list.push({
        name: '新增节点',
        tagId: this.getRandNum(10)
      })
      this.updateData()
    },
    // 删除节点
    del (item) {
      if (!this.parent) {
        this.lseutil.msg({
          msg: '不能删除根节点',
          type: 2
        })
        return
      }
      let index = this.parent.list.findIndex(it => item.tagId === it.tagId)
      this.parent.list.splice(index, 1)
      this.updateData()
    },
    // 编辑名称
    edit (item) {
      this.lseutil.msg({
        msg: '编辑名称'
      })
    },
    // 执行自定义菜单方法
    doFun (fun, args, useThat) {
      // console.log(fun)
      if (fun) {
        if (useThat) {
          let that = this
          args ? fun(args, that) : fun(that)
          return
        }
        args ? fun(args) : fun()
      }
    }
  }
}
</script>

<style scoped>
.nodes .topLine:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: black
}
.nodes .right, .nodes .left{
    text-align: center;
}
.nodes .right:before, .nodes .left::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    background-color: black
}
.nodes .left::before{
    right: 0;
}
.nodes .right::before{
    left: 0;
}
.nodes .node{
    display: grid;
    padding: 0 10px;
    position: relative;
}
.nodeContent{
    padding: 10px;
    border: 1px solid rgb(197, 196, 196);
    width: fit-content;
    margin: auto;
    transition: all 0.5s;
    cursor: pointer;
    position: relative;
    word-break: break-all;
    top: 0;
    min-width: 120px;
    max-width: 200px;
    text-align: center;
    /* background: red;
    color: white; */
}
.node .nodeContent:hover{
  box-shadow: 0 0 10px gray;
}

.nodeRightMenu{
  background: white;
  transition: all 0.5s;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin-top:5px;
}
.nodeRightMenu .menu{
  width: 100%;
  text-align: center;
  border-radius: 5px;
  margin: 5px 0;
  background-color: #2db7f5;
  border: none;
  padding: 10px 0;
  color: white;
  cursor: pointer;
  transition: all 0.5s;
}
.nodeRightMenu .menu:hover{
  background-color: #8dd2f1;
}
</style>
